<template>
  <el-upload
    :action="uploadImgUrl"
    :headers="headers"
    list-type="picture"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :on-success="handleUploadSuccess"
    :on-error="handleUploadError"
    :before-upload="handlebeforeUpload"
    :limit="limit"
    :on-exceed="handleExceed"
    :file-list="fileList"
  >
    <el-button size="small" type="primary" :disabled="fileList.length>(limit-1)">上传图片</el-button>
    <!-- <div slot="tip" class="el-upload__tip"><i class="el-icon-warning" /> 只能上传jpg/png文件，且不超过2MB!</div> -->
  </el-upload>
</template>

<script>
import upload from '@/mixins/upload'
export default {
  name: 'UploadImg',
  components: {},
  mixins: [upload],
  props: {
    limit: {
      default: 1,
      type: Number
    }
  },
  data() {
    return {

    }
  },
  computed: {},
  watch: {
    uploadedUrls(v) {
      this.$emit('update:images', v)
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 上传前
    handlebeforeUpload(file) {
      const accectFileType = ['image/jpeg', 'image/jpg', 'image/png']
      const isJPG = accectFileType.includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.warning('上传正确图片格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.warning('上传图片大小不能超过 2MB!')
        return false
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style lang='scss' scoped>
/deep/ .el-upload__tip {
  display: inline-block;
  margin-left: 20px;
  color: #999;
  line-height: 15px;
  .el-icon-warning{
      color: #E6A23C;
      font-size: 14px;
  }
}
</style>
